<!DOCTYPE html>
<html lang="zh-CN">
<%@ page language="java" import="com.siysoft.tc.base.bean.to.User"
	pageEncoding="UTF-8"%>
<%	User us = (User)session.getAttribute("user");%>
<head>
<title>Register Page</title>
<%@include file="/common/head.jsp"%>
</head>

<body class="register-body">
	<div class="register-logo">
		<span class="logoF f30">TCLOGO</span><span class="welcome">Welcome</span>
		<a href="<%=request.getContextPath()%>/app/login_index.htm"
			class="green">Already Havae An Account ?</a> 
	</div>
	<div class="center green" style=" margin-top:20px">Please Choose
		Your linterests (Three at Most)</div>
	<div class="container">
		<div class="row r-classroom" id="interest_list">
			<ul class="slides" id="list_lecture">
				<li><div class="col-md-3"> 
						<img
							src="<%=request.getContextPath()%>/common/images/teacher2.jpg"
							class="img">
					</div>
				</li>
				<li><div class="col-md-3">
						<img
							src="<%=request.getContextPath()%>/common/images/teacher2.jpg"
							class="img">
					</div>
				</li>
				<li><div class="col-md-3">
						<img
							src="<%=request.getContextPath()%>/common/images/teacher2.jpg"
							class="img">
					</div>
				</li>
				<li><div class="col-md-3">
						<img
							src="<%=request.getContextPath()%>/common/images/teacher2.jpg"
							class="img">
					</div>
				</li>
				<li><div class="col-md-3">
						<img
							src="<%=request.getContextPath()%>/common/images/teacher2.jpg"
							class="img">
					</div>
				</li>
				<li><div class="col-md-3">
						<img
							src="<%=request.getContextPath()%>/common/images/teacher2.jpg"
							class="img">
					</div>
				</li>
				<li><div class="col-md-3">
						<img
							src="<%=request.getContextPath()%>/common/images/teacher2.jpg"
							class="img">
					</div>
				</li>
			</ul>
			<ul class="flex-direction-nav">
				<li><a class="flex-prev" href="#"></a>
				</li>
				<li><a class="flex-next" href="#"></a>
				</li>
			</ul>
		</div>
	</div>
	<div class="register-wrap">
		<ul class="famition">
			<li>
				<!-- <input type="text" placeholder="School" class="school" name="school"> -->
				<select class="school" id="user_school">
					<option>加载中...</option>
			</select></li>
			<li><input type="text" placeholder="student_id" class="input"
				name="student_id" id="user_student_id">
			</li>
			<li><input type="button" class="button" id="register2Button"
				value="Sign Up" />
			</li>
		</ul>
	</div>

	<script>
		$("#register2Button").on("click", function(){
			var interest = "[";
			var index = 0;
			$(".r-classroom .col-md-3").each(function(){
				if($(this).find("span").hasClass("glyphicon-ok-circle")){
					if(index > 0) interest += ",";
					interest = interest
					+ '{"interest_id":"' + $(this).find(".img").attr("id") + '"}'
					index++;
				}
			});
			interest += ']';
			var user_id = <%=us.getUser_id() %>;
			var school = $("#user_school").val();
			var student_id = $("#user_student_id").val();
			window.location.href="register2.htm?id="+user_id+"&interest="+interest+"&school="+school+"&student_id="+student_id;
			/* $.ajax({
				type:"post",
				url:"register2.htm",
				data:{
					"id": user_id,
					"interest":interest,
					"school":$("#user_school").val(),
					"student_id":$("#user_student_id").val()
				},
				async:false,
				success:function(data){
				}
			}); */
		});
		$(document).ready(function(){
			
			//interest
			$.ajax({
				type:"get",
				url:"user/interest.htm",
				data:{
					"limit":12,
					"offset":0
				},
				async:false,
				success:function(data){
					var interest = data.data.interest;
					var interest_list_html = "";
					for(var i = 0; i < interest.length; i++){
						interest_list_html = interest_list_html
						+ '<div class="col-md-3"><img width="220" height="220" src="<%=request.getContextPath()%>/'
						+ interest[i].interest_avatar
						+ '" class="img" id="' + interest[i].interest_id
						+ '"></div>';
					}
					$("#interest_list").html(interest_list_html);
				}
			});
			
			//school
			$.ajax({
				type:"get",
				url:"<%=request.getContextPath()%>/app/user/school.htm",
				data:{
				},
				async:false,
				success:function(data){
					s = data.data.school;
					school_list_html = "";
					for(var i = 0; i < s.length; i++){
						school_list_html = school_list_html
						+ '<option>' + s[i].school_name + '</option>';
					}
					$("#user_school").html(school_list_html);
				}
			});
			
			(function(){	
				var Index=0;
				$(".r-classroom .col-md-3").on("click",function(){
					if($(this).find("span").hasClass("glyphicon-ok-circle")){
						$(this).find("span").remove();
						Index--;
					}else{
						//alert($(this).find(".img").attr("id"));
						Index++;
						if(Index>3){
							Index=3;
							alert("Three interests limit!");
							return;
						}else{
							var temp=$(
								'<span class="glyphicon glyphicon-ok-circle">' + '</span>'
							);
							temp.appendTo($(this));
						}
					}
					
				});
			})();
		});
	</script>

</body>
</html>